<template>
  <div class="search-container">
    <div class="search-main">
      <h1 class="title">Iceberg</h1>
      <search-input @search="search"/>
    </div>
  </div>
</template>
<script>
import SearchInput from './search-input'
import storage from './storage'

export default {
  components: { SearchInput },
  created() {
    storage.remove()
  },
  methods: {
    search(val) {
      if (val) {
        storage.set(val)
        this.$router.push({ name: 'SearchShow' })
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
html, body {
  overflow: hidden;
}

$bg: #414a58;
$dark_gray: #889aa4;
.search-container {
  height: 100%;
  width: 100%;
  background-color: $bg;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: baseline;
  align-items: baseline;

  .search-main {
    width: 700px;
    margin-top: 200px;
    /*border: 1px solid red;*/
  }

  .title {
    font-size: 46px;
    color: $dark_gray;
    margin: 0px auto 20px auto;
    text-align: center;
    font-weight: bold;
  }
}
</style>
